import React, { useRef, useState } from 'react';
// import { useCreation } from 'ahooks';
// import { useCreation } from '@/zhooks';
import { zhooks } from 'ym-design'

const { useCreation } = zhooks


class Foo {
  data: number;
  constructor() {
    console.log('Foo 被初始化');
    this.data = Math.random();
  }
}

function HookUseCreation() {
  // 虽然 new Foo() 的结果只会在首次渲染时使用，但是依然在每次渲染时都在调用这个方法 (Foo.constructor每次都会被执行)。如果是创建昂贵的对象，这可能是一种浪费。
  // const foo = useRef<Foo>(new Foo());
  // console.log('foo.current.data', foo.current.data);

  const [flag, setFlag] = useState<number>();
  const [fooRes, setFooRes] = useState(() => {
    // console.log('---函数式组件每次重新执行时(不是 初始化/ 卸载后的重新执行)，react 的hooks都会重新执行--');
    // console.log('但是 useState(() => {})中参数为function, 该function只会在初始化/卸载后重新执行的时候执行一次，使用的该函数返回值');
    console.log('函数式组件在初始化/卸载后重新执行的时候依次执行useState/useReducer/useEffect等形成hook链表，并把初始值赋值到链表对应项的queue.update.memoizedState对象中');
    console.log('执行setState...更新链表queue.update.memoizedState,更新Fiber树，重新执行函数式组件，又会一次执行useState/useReducer/useEffect，从hooks链表对应项中返回最新值');
    console.log(
      '在mount和update过程中，useState(() => {})中参数为function, 该function只会在初始化/卸载后重新执行的时候执行一次，使用的该函数返回值，参数为new Class(),那么该类的构造函数每次都会执行。',
    );

    return new Foo();
  });
  //
  const foo1 = useCreation(() => new Foo(), []);

  return (
    <>
      <p>{flag}</p>
      <button
        type="button"
        onClick={() => {
          setFlag(Math.random());
        }}
      >
        Rerender
      </button>
    </>
  );
}

export default HookUseCreation;